<template>
	<div>
        <mj-title type="h2" title="UEditor 富文本编辑器"></mj-title>
        <div class="page-desc">百度富文本编辑器</div>

        <mj-title type="h5" title="Ueditor"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <vue-ueditor-wrap v-model="msg" ref="ueditor" :destroy="true"></vue-ueditor-wrap>
			  	<div class="preview" v-html="msg"></div>
			    <div class="mb5">
			        <mj-button @click="setContent()" type="primary">写入内容</mj-button>
			        <mj-button @click="setContent(true)" type="primary">追加内容</mj-button>
			        <mj-button @click="getContentTxt()" type="primary">获得纯文本</mj-button>
			        <mj-button @click="getPlainTxt()" type="primary">获得带格式的纯文本</mj-button>
			        <mj-button @click="setFocus()" type="primary">使编辑器获得焦点</mj-button>
			    </div>
			    <div>
			        <mj-button @click="visible1=true" type="primary">插入指定的内容</mj-button>
			        <mj-button id="enable" @click="setEnabled()" type="primary">可以编辑</mj-button>
			        <mj-button  @click="setDisabled()" type="primary">不可编辑</mj-button>
			    </div>

			    <mj-dialog title="插入内容" v-model="visible1" confirm="确定" cancel="取消" :beforeClose="beforeClose" width="600" :opened="insertDialogOpened">
			       <mj-input placeholder="请输入" type="textarea" :rows="10" v-model="htmlcontent" ref="textarea"></mj-input>
			    </mj-dialog>

            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					    &lt;vue-ueditor-wrap v-model="msg" :config="myConfig">&lt;/vue-ueditor-wrap>
					  	&lt;div class="preview" v-html="msg">&lt;/div>
					&lt;/template>
					&lt;script>
					import VueUeditorWrap from '../components/ueditor/vue-ueditor-wrap.vue';
					//或调用 import VueUeditorWrap from '/public/vue-ueditor-wrap.min.js'; 

					export default {
						components:{ VueUeditorWrap },
						data() {
							return {
								msg: '测试内容3333',
								myConfig: {
									// autoHeightEnabled: false,// 编辑器不自动被内容撑高
									initialFrameHeight: 200,// 初始容器高度
									// initialFrameWidth: '100%',// 初始容器宽度
									UEDITOR_HOME_URL: '/ueditor/',//UEditor 资源文件的存放路径
									serverUrl: 'http://localhost:8080/controller.php', //上传文件接口
								}
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-divider>说明</mj-divider>
		<ul class="page-list">
			<li class="fwb gray5">UEditor未打包进MJUI，请自行安装</li>
			<li>gitee：<a href="https://gitee.com/CrazyHat/vue-ueditor-wrap" target="_blank">https://gitee.com/CrazyHat/vue-ueditor-wrap</a></li>
			<li>一、下载最新编译的 UEditor，放入你项目的 static 目录下</li>
			<li>二、引入VueUeditorWrap组件<br>
			import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module<br>
			// 或者<br>
			const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS</li>
			<li>三、注册组件<br>
			components: {<br>
			&nbsp;&nbsp;VueUeditorWrap<br>
			}<br>
			// 或者在 main.js 里将它注册为全局组件<br>
			Vue.component('vue-ueditor-wrap', VueUeditorWrap)</li>
			<li>四、v-model绑定数据<br>
			&lt;vue-ueditor-wrap v-model="msg">&lt;/vue-ueditor-wrap></li>
			<li>五、根据项目需求修改配置，完整配置选项查看 <a href="https://github.com/HaoChuan9421/vue-ueditor-wrap/blob/master/public/UEditor/ueditor.config.js" target="_blank">ueditor.config.js</a> 源码或 <a href="http://fex.baidu.com/ueditor/" target="_blank">官方文档</a></li>
		</ul>
	</div>
</template>

<script>

import VueUeditorWrap from '../components/ueditor/vue-ueditor-wrap.vue';

export default {
	name:'UE',
	components:{ VueUeditorWrap },
	data() {
		return {
			msg: '测试内容3333',
			visible1:false,
			htmlcontent:'',
		}
	},
	mounted() {
	},
	methods: {
		setContent(isAppendTo) {
	        this.$refs.ueditor._setContent('欢迎使用ueditor', isAppendTo);
		},
		setFocus() {
			this.$refs.ueditor._foucus()
		},
		setEnabled() {
			this.$refs.ueditor._setEnabled()
		},
		setDisabled() {
			this.$refs.ueditor._setDisabled('fullscreen')
		},
		getContentTxt() {
			let txt = this.$refs.ueditor._getContentTxt()
			console.log(txt)
			this.$alert(txt)
		},
		getPlainTxt() {
			let txt = this.$refs.ueditor._getPlainTxt()
			console.log(txt)
			this.$alert(txt)
		},
	    beforeClose (type, done) {
	      if (type === 'confirm') {
	        done()
	        console.log(this.htmlcontent)
	        this.$refs.ueditor._insertHtml(this.htmlcontent)
	      } else {
	        done()
	      }
	    },
	    insertDialogOpened() {
	    	this.$nextTick(() => {
	    		this.$refs.textarea.$refs.textarea.focus()
	    	})
	    }
	},
	destroyed() {
		this.$destroy('VueUeditorWrap')
	}
}
</script>

<style scoped>
.preview {min-height:30px;margin-top: 10px;}
>>> .edui-editor {width:100% !important;}
</style>

